<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <input type="button" value="发送请求" onclick="sendReq()">
  </body>
  
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
  <script>
    function sendReq() {
      // 请求拦截器
      axios.interceptors.request.use(
        (request) => {
          console.log('正常请求拦截器1');
          return request;
        },
        (error) => {
          console.log('错误请求拦截器1', error);
          return Promise.reject(error);
        },
        {
          synchronous: true, //同步拦截器标志，默认异步
          runWhen: (request) => { //拦截器过滤，返回true时该拦截器才生效
            return request.method === 'post';
          }
        }
      );
      axios.interceptors.request.use(
        (request) => {
          console.log('正常请求拦截器2');
          throw '[正常请求拦截器2错误]';
        },
        (error) => {
          console.log('错误请求拦截器1', error);
          return Promise.reject(error);
        },
      );
      
      // 响应拦截器
      axios.interceptors.response.use(
        (response) => {
          console.log('正常响应拦截器1');
          return response;
        },
        (error) => {
          console.log('错误响应拦截器1', error);
          return Promise.resolve('[错误响应拦截器1处理错误]');
        },
      );
      axios.interceptors.response.use(
        (response) => {
          console.log('正常响应拦截器2');
          return response;
        },
        (error) => {
          console.log('错误响应拦截器2', error);
          return Promise.reject(error);
        },
      );
      
      axios.get('http://localhost:9000/back_end_get/params?query_name=query').then(res => {
        console.log('正常响应', res);
      }).catch(err => {
        console.error('错误响应', err);
      });
      
      // 输出结果：正常请求拦截器2 错误请求拦截器1[正常请求拦截器2错误] 错误响应拦截器1[正常请求拦截器2错误] 正常响应拦截器2 正常响应[错误响应拦截器1处理错误]
    }
  </script>
</html>